<template>
  <div @click="confirmReadMessageTag" class="div_right_chart">
    <div id="crollbar" class="div_right_chart_cScrollbar" v-if="this.$store.state.chartStatus.nowSessions.length > 0">
      <!--      <div v-for="item in this.$store.state.chartStatus.nowSessions[this.$store.state.chartStatus.nowChartNumber].info.msgs"-->
      <div
          v-for="item in this.$store.state.chartStatus.nowSessions[this.$store.state.chartStatus.nowChartNumber].array_message"
          :key="item" class="div_right_chart_session">
        <div v-if="item.uid === this.$store.state.userInfo.id">
          <!--          应该把ack透传下去.-->
          <MessageMe :obj="item"/>
        </div>
        <div v-if="item.uid !== this.$store.state.userInfo.id">
          <MessageFriend :obj="item"/>
        </div>
      </div>
    </div>
    <!--    发送消息-->
    <div>
      <MessageSend/>
    </div>
  </div>
</template>

<script>

import MessageMe from './message_me'
import MessageFriend from './message_friend'
import MessageSend from './right_send_message'
// import {CScrollbar} from "c-scrollbar"
// import {Notification} from "../../util/notification";
// import {InfoFilled} from "@element-plus/icons"

export default {
  name: "right_chart_session",
  components: {
    MessageMe, MessageFriend, MessageSend
  },
  data() {
    return {
      msgInfos: ""
    }
  },
  methods: {
    downCrollbar() {
      if (this.$store.state.chartStatus.nowSessions.length > 0) {
        let divs = document.getElementById('crollbar')
        divs.scrollTop = divs.scrollHeight
      }
    },
    confirmReadMessageTag() {
      // 确认已读消息.
      this.$store.state.chartStatus.nowSessions[this.$store.state.chartStatus.nowChartNumber].have_no_read_message = 0
    },
  },
  mounted() {
    if (this.$store.state.chartStatus.nowSessions.length > 0) {
      this.downCrollbar()
    }
  },
  updated() {
    if (this.$store.state.chartStatus.nowSessions.length > 0) {
      this.downCrollbar()
    }
  }
}
</script>

<style scoped>

.div_right_chart_cScrollbar {
  border-bottom: 1px solid rgba(189, 195, 199, 0.33);
  width: 1040px;
  /*550*/
  height: 580px;
  overflow: auto;
  /*overflow-y: auto;*/
}

.div_right_chart_cScrollbar::-webkit-scrollbar {
  width: 6px;
  height: 50px;
  background-color: #cccccc;
}

.div_right_chart_cScrollbar::-webkit-scrollbar-button {
  height: 200px;
  background: #cccccc;
  border-radius: 10px;
}


.div_right_chart {
  background-color: #f5f6f7;
}

.div_right_chart_session {
}

</style>